<template>
  <view class="content">
    <view class="banner">
      <view style="margin-left: 20%;width: 100%"><w-qrcode ref="qrcode" :options="options"></w-qrcode></view>
      <view style="margin:0 auto;width: 80%;margin-top: 20rpx;"><u-button type="success" @click="SaveCode">保存图片</u-button></view>
      <view class="bottom">
        <ul style="padding: 10px">
          <li>用此二维码给商家进行核销</li>
        </ul>
      </view>
    </view>

  </view>
</template>

<script>
import UButton from "uview-ui/components/u-button/u-button";
export default {
  components: {UButton},
  data(){
    return {
      options:{},
      id:0,
    }
  },
  onLoad(options) {
    this.id = options.id;
    this.getCouponDetail(this.id)
  },
  onShow(){
  },
  methods:{
    //获取优惠券详情
     async getCouponDetail(id){
        let userToken=uni.getStorageSync('userToken');
        const res=await this.$api.getCouponDetail({user_token:userToken,coupon_id: id},this.$baseUrl);
         console.log(res)
        if(res.data.level=='success'){
            let code = res.data.data.qrcode_url
            this.createQrcode(code)
        } else {
        wx.showToast({
          icon: 'none',
          title: res.data.message
        })
      }
    },
    async createQrcode(code){
       this.options = {
         code: code,// 生成二维码的值
         padding: 10,
         border:{
           color: ['#F27121','#8A2387','#1b82d2'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
           opacity: 0.6, //边框透明度 默认为1不透明 0~1
           lineWidth: 6, //边框宽度
           degree: 15 //边框圆角度数 默认5
         },
         img: {// 二维码log配置 非必传
           src: '/static/local_logo.png', // 图片地址
           size: 60,// 图片大小
           degree: 5,// 圆角大小 如果type为round生效
           type: 'round',//图片展示类型 默认none 可选值  round圆角  circle圆 如果为round 可以传入degree设置圆角大小 默认 5
           color: '#ffffff', //图片周围的白色边框
           width: 8 //图片周围白色边框的宽度 默认5
         },
         size: 460,// 460代表生成的二维码的宽高均为460rpx
       }
    },
    async SaveCode (){//保存二维码图片
      const res = await this.$refs.qrcode.GetCodeImg()
      console.log(res)
      this.saveImage(res)
    },

    //保存图片到手机
    saveImage(fileTmp) {
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success: (res) => {
          wx.showLoading({
            title: "保存中"
          })
          wx.saveImageToPhotosAlbum({
            filePath: fileTmp.tempFilePath,
            complete: () => {
              wx.hideLoading()
            }
          })

        },
        fail: (res) => {
          wx.hideLoading()
        }
      })
    },
  }
}


</script>

<style>
.tugurl{
  color: #999;
}
.sharbuttn{
  display: flex;
  justify-content: center;
}
.shartitle{
  width: 80%;
  text-align: center;
  margin-left: 10%;
  border-bottom: 1px solid #dddddd;
  position: relative;
  height: 60upx;
}
.tgtit{
  text-align: center;
}
.shartitle view{
  height: 50upx;
  line-height: 50upx;
  font-size: 28upx;
  color: #999;
  width: 120upx;
  margin: 32upx auto;
  position: absolute;
  background: #fff;
  left: 50%;
  margin-left: -60upx;
}
.sharapk{
  display: flex;
  justify-content: center;
  margin: 20upx auto
}
.sharapk view{
  margin: 40upx;
}
.sharapk view image{
  height: 80upx;
  width: 80upx;
}
.content{
  width: 100%;
  background-color: #ffffff;
}
.top{
  width: 100%;
  height:400upx;
  /*background: url(http://pds.jyt123.com/wxtest/banner.png) no-repeat ;*/
  background-size:100% ;
  background-position:center center;
}
.banner{
  width: 100% ;
  background-color: #FFFFFF;
  border-radius: 60upx 60upx 0 0;
  margin-top: 100rpx;
  text-align: center;
}
.banner dl{
  margin-top: -80upx;
}
.banner dl dt{
  text-align: center;
}
.banner dl dt image{
  width: 160upx;
  height: 160upx;
  border-radius:50% ;
}
.banner dl dd{
  text-align: center;
}
.img{
  width: 300upx;
  height: 300upx;
  /*background-color: red;*/
  margin: 0 auto;
  margin-top: 60upx;
}
.img image{
  width: 100%;
  height: 100%;
}
.btn{
  width: 260upx;
  height: 60upx;
  line-height: 60upx;
  margin: 0 auto;
  margin-top: 60upx;
  border-radius: 40upx;
  border: 0;
  font-size: 26upx;
  outline: 0;
  background: #33b17b;
  color: #FFFFFF;
  text-align: center;
}
.bottom{
  width: 100%;
  height: 400upx;
  /* 	background: url(../../static/share_img/beij.png) no-repeat; */
  background-position:left bottom;/* 设置背景图片位置 */
  background-size: 20%;
}
.bottom ul{
  padding-left: 40upx;
  box-sizing: border-box;
}
.bottom ul li{
  width: 100%;
  height: 60upx;
}
</style>
